<template>
	<view>
		<view class="car-input-container">
			<view class="tab-box">
				<text @tap="changTab" :class="currentTab == 1 ? 'active1' : ''" :data-current="1">普通牌照</text>
				<text @tap="changTab" :class="currentTab == 2 ? 'active1' : ''" :data-current="2">新能源</text>
			</view>

			<view class="inputs">
				<view class="inputs-item-frist" @click="plateInput(0)">{{ inputList[0] }}</view>
				<view class="inputs-item-second" @click="plateInput(1)">{{ inputList[1] }}</view>
				<view class="split">·</view>
				<view class="inputs-item" @click="plateInput(2)">{{ inputList[2] }}</view>
				<view class="inputs-item" @click="plateInput(3)">{{ inputList[3] }}</view>
				<view class="inputs-item" @click="plateInput(4)">{{ inputList[4] }}</view>
				<view class="inputs-item" @click="plateInput(5)">{{ inputList[5] }}</view>
				<view class="inputs-item" @click="plateInput(6)">{{ inputList[6] }}</view>
				<view v-if="newPower" class="inputs-item" @click="plateInput(7)">{{ inputList[7] }}</view>
			</view>
		</view>
		<!-- 省份 -->
		<view class="car-number-container" v-if="showKeyPop1">
			<view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince1" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince2" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince3" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item province-item" v-for="(item,index) in keyProvince4" :key="index"
					@click="tapKeyboard(item)">{{item}}</view>
				<!-- 删除 -->
				<view class="plate-popup-item province-item del" @click="onPlateDelTap">
					<image :src="deleteImgBase64" />
				</view>
			</view>
		</view>
		<!-- 地区 | 车牌输入-->
		<view class="car-number-container" v-if="showKeyPop2">
			<view class="plate-close" @click="closeKeyboard"><text class="plate-close-btn">关闭</text></view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput1" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput2" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput3" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput4" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
			</view>
			<view class="plate-popup-list">
				<view class="plate-popup-item" :class="lockInput.includes(item)?'lock-item':''"
					v-for="(item,index) in keyEnInput5" :key="index" @click="tapKeyboard(item)">
					{{item}}
				</view>
				<!-- 删除 -->
				<view class="plate-popup-item del" @click="onPlateDelTap">
					<image :src="deleteImgBase64" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'car-number-input',
		emits: ['numberInputResult'],
		props: {
			defaultStr: {
				type: String,
				default: ''
			},
			plateNum: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				newPower: false,
				currentTab: 1,
				inputList: [" ", " ", " ", " ", " ", " ", " ", " "],
				curInput: 0,
				maxNum: 8,
				showKeyPop1: false,
				showKeyPop2: false,
				keyProvince1: ['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],
				keyProvince2: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
				keyProvince3: ['粤', '桂', '琼', '渝', '川', '贵', '云', '藏'],
				keyProvince4: ['陕', '甘', '青', '宁', '新'],
				keyEnInput1: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
				keyEnInput2: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P'],
				keyEnInput3: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
				keyEnInput4: ['Z', 'X', 'C', 'V', 'B', 'N', 'M'],
				keyEnInput5: ['港', '澳', '学', '挂', '警', '军'],
				lockInput: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
				deleteImgBase64: ""
			}
		},
		watch: {
			defaultStr(val) {
				if (val != "" && val != null) {
					const valList = val.split("")
					for (let i in valList) {
						this.inputList[i] = valList[i]
					}
				}
			},
			curInput(val) {
				this.showOrHidePop(val)
				switch (val) {
					case 1:
						this.lockInput = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", '港', '澳', '学', '挂', '警', '军'];
						break;
					case 2:
					case 3:
					case 4:
					case 5:
						this.lockInput = ["O", '港', '澳', '学', '挂', '警', '军'];
						break;
					case 6:
						if (this.currentTab == 2) {
							this.lockInput = ["O", '港', '澳', '学', '挂', '警', '军'];
						} else {
							this.lockInput = ["O"];
						}
						break;
					default:
						this.lockInput = ["O"];
						break;
				}
			}
		},
		created() {
			if (this.defaultStr != "" && this.defaultStr != null) {
				const valList = this.defaultStr.split("")
				for (let i in valList) {
					this.inputList[i] = valList[i]
				}
				if(this.defaultStr.length == 8){
					this.currentTab = 2
					this.newPower = true
				}else{
					this.currentTab = 1
					this.newPower = false
				}
			}
		},
		methods: {
			// 判断第六位是否是中文
			endsWithAny(str, suffixes) {
				const sixthCharacter = str[6]; // 获取第六位字符（索引从0开始）
				return suffixes.includes(sixthCharacter);
			},

			/*
			 * tab点击切换
			 */
			changTab(event) {
				this.currentTab = event.target.dataset.current
				if (this.currentTab == 1) {
					this.newPower = false
					if (this.inputList[7] !== " ") {
						this.inputList.splice(7, 1)
						this.emitResult()
						this.plateInput(6)
					}
				}
				if (this.currentTab == 2) {
					const plateNo = this.inputList.join("")
					this.newPower = true
					if (this.inputList.some(item => item.trim() !== "")) {
						if (this.inputList[6] !== " ") {
							if (this.endsWithAny(this.inputList, this.keyEnInput5)) {
								this.inputList[6] = ''
								this.plateInput(6)
							} else {
								this.plateInput(7)
							}
						} else {
							this.lockInput = ["O", '港', '澳', '学', '挂', '警', '军'];
						}
					} else {
						this.plateInput(0)
					}
				}
			},

			plateInput(e) {
				this.curInput = e
				this.showOrHidePop(e)
			},
			showOrHidePop(val) {
				if (val == 0) {
					this.showKeyPop1 = true
					this.showKeyPop2 = false
				} else if (val !== -1) {
					this.showKeyPop1 = false
					this.showKeyPop2 = true
				} else {
					this.showKeyPop1 = false
					this.showKeyPop2 = false;
				}

			},
			tapKeyboard(e) {
				if (this.lockInput.includes(e)) {
					return
				}
				this.inputList[this.curInput] = e
				if (this.currentTab === 1) {
					this.curInput = this.curInput < this.maxNum - 2 ? this.curInput + 1 : -1;
				} else if (this.currentTab === 2) {
					this.curInput = this.curInput < this.maxNum - 1 ? this.curInput + 1 : -1;
				}
				this.emitResult()
			},
			closeKeyboard() {
				this.curInput = -1
			},
			onPlateDelTap() {
				if (this.inputList[this.curInput] == " ") {
					this.curInput--
				}
				this.inputList[this.curInput] = " "
				this.emitResult()
				// 强制更新组件视图
				this.$forceUpdate()
			},
			emitResult() {
				const returnResult = this.inputList.join("")
				this.$emit('numberInputResult', returnResult);
			}
		}
	};
</script>

<style scoped lang="scss">
	.car-input-container {
		.car-input-box {
			display: inline-block;
			width: 12.5%;
			height: 44px;
			vertical-align: middle;

			.car-input-item {
				position: relative;
				border: 1px solid #E2E2E2;
				height: 40px;
				line-height: 40px;
				width: 80%;
				margin-left: 10%;
				text-align: center;
				font-size: 17px;

				.sel-item-line {
					position: absolute;
					bottom: 3px;
					left: 15%;
					height: 2px;
					background-color: #2979ff;
					width: 70%;
				}

				.new-item-img {
					position: absolute;
					top: -6px;
					left: 50%;
					margin-left: -15px;
					height: 13px;
					width: 30px;
					z-index: 9;
				}
			}

			.sel-item {
				color: #2979ff;
			}

			.last-item {
				border: 1px solid #18bc37;
			}
		}
	}

	.car-number-container {
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
		// height: 290px;
		background-color: #E3E2E7;
		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, 0.1);
		overflow: hidden;
		text-align: center;

		.plate-close {
			height: 40px;
			line-height: 40px;
			text-align: right;
			background-color: #FFF;

			.plate-close-btn {
				font-size: 13.5px;
				color: #555;
				margin-right: 15px;
			}
		}

		//键盘主体内容-单行
		.plate-popup-list {
			margin: 0 auto;
			overflow: hidden;
			display: inline-block;
			display: table;

			&:last-child {
				margin-bottom: 40upx;
			}
		}

		//键盘主体内容-单个
		.plate-popup-item {
			float: left;
			font-size: 16px;
			width: 8vw;
			margin: 0 1vw;
			margin-top: 8px;
			height: 40px;
			line-height: 40px;
			background: #FFFFFF;
			border-radius: 5px;
			color: #4A4A4A;

			image {
				width: 16px;
				height: 16px;
				margin: 12px auto;
			}
		}

		.plate-popup-item:active {
			background-color: #EAEAEA;
		}

		.province-item {
			width: 8.8vw;
		}

		.lock-item {
			color: #AAA;
		}
	}


	.inputs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.inputs-item-frist {
		width: 60rpx;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
		border: 1px solid #8fb4ff;
		margin-right: 20rpx;
	}

	.inputs-item-second {
		width: 60rpx;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		border: 1px solid #8fb4ff;
		margin-right: 20rpx;
	}

	.inputs-item {
		width: 60rpx;
		height: 96rpx;
		border-bottom: 5rpx solid #4b71fc;
		color: #000000;
		font-size: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		margin-right: 5rpx;
	}

	.tab-box {
		margin: 0 20%;
		margin-top: 60rpx;
		margin-bottom: 40upx;
		height: 80rpx;
		display: flex;
		background: white;
		justify-content: center;
		align-items: center;
		border-radius: 40rpx;
		overflow: hidden;

	}

	.tab-box text {
		width: 50%;
		font-size: 26rpx;
		line-height: 72rpx;
		text-align: center;
	}

	.active1 {
		background-color: rgba(43, 112, 252, 1);
		color: #ffffff;
	}
</style>